<template>
  <div class="liteflow-editor-tool-bar">
    <div class="tool-bar-left">
      <div class="tool-group">
        <button 
          class="tool-btn" 
          :class="{ active: isUndoEnabled }"
          @click="handleUndo"
          :disabled="!isUndoEnabled"
        >
          <i class="icon-undo"></i>
          撤销
        </button>
        <button 
          class="tool-btn" 
          :class="{ active: isRedoEnabled }"
          @click="handleRedo"
          :disabled="!isRedoEnabled"
        >
          <i class="icon-redo"></i>
          重做
        </button>
      </div>
      
      <div class="tool-group">
        <button class="tool-btn" @click="handleSave">
          <i class="icon-save"></i>
          保存
        </button>
        <button class="tool-btn" @click="handleExport">
          <i class="icon-export"></i>
          导出
        </button>
      </div>
    </div>
    
    <div class="tool-bar-center">
      <div class="zoom-controls">
        <button class="zoom-btn" @click="handleZoomOut">
          <i class="icon-zoom-out"></i>
        </button>
        <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
        <button class="zoom-btn" @click="handleZoomIn">
          <i class="icon-zoom-in"></i>
        </button>
        <button class="zoom-btn" @click="handleFitWindow">
          <i class="icon-fit"></i>
        </button>
      </div>
    </div>
    
    <div class="tool-bar-right">
      <div class="tool-group">
        <button class="tool-btn" @click="handleFullscreen">
          <i class="icon-fullscreen"></i>
          全屏
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import { useHistory } from '../../hooks/useHistory';

export default {
  name: 'ToolBar',
  props: {
    flowGraph: {
      type: Object,
      required: true
    },
    widgets: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zoomLevel: 1,
      isUndoEnabled: false,
      isRedoEnabled: false
    };
  },
  mounted() {
    this.initGraphListeners();
    this.updateButtonStates();
  },
  beforeDestroy() {
    this.removeGraphListeners();
  },
  methods: {
    initGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.on('scale', this.handleZoomChange);
        this.flowGraph.on('toolBar:forceUpdate', this.updateButtonStates);
      }
    },
    removeGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.off('scale', this.handleZoomChange);
        this.flowGraph.off('toolBar:forceUpdate', this.updateButtonStates);
      }
    },
    handleZoomChange() {
      if (this.flowGraph) {
        this.zoomLevel = this.flowGraph.zoom();
      }
    },
    updateButtonStates() {
      const history = useHistory();
      this.isUndoEnabled = history.canUndo();
      this.isRedoEnabled = history.canRedo();
    },
    handleUndo() {
      const history = useHistory();
      history.undo();
    },
    handleRedo() {
      const history = useHistory();
      history.redo();
    },
    handleSave() {
      if (this.flowGraph) {
        const data = this.flowGraph.toJSON();
        console.log('Save data:', data);
        // 这里可以触发保存事件
        this.$emit('save', data);
      }
    },
    handleExport() {
      if (this.flowGraph) {
        const data = this.flowGraph.toJSON();
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'liteflow-graph.json';
        a.click();
        URL.revokeObjectURL(url);
      }
    },
    handleZoomIn() {
      if (this.flowGraph) {
        this.flowGraph.zoom(0.1);
      }
    },
    handleZoomOut() {
      if (this.flowGraph) {
        this.flowGraph.zoom(-0.1);
      }
    },
    handleFitWindow() {
      if (this.flowGraph) {
        this.flowGraph.zoomToFit({ padding: 20 });
      }
    },
    handleFullscreen() {
      if (!document.fullscreenElement) {
        this.$el.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.liteflow-editor-tool-bar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
}

.tool-bar-left,
.tool-bar-right {
  display: flex;
  align-items: center;
}

.tool-group {
  display: flex;
  align-items: center;
  margin-right: 16px;
  
  &:last-child {
    margin-right: 0;
  }
}

.tool-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin-right: 4px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover:not(:disabled) {
    border-color: #1890ff;
    color: #1890ff;
  }
  
  &:active:not(:disabled) {
    background: #f0f0f0;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &.active {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
  }
  
  i {
    margin-right: 4px;
    font-size: 14px;
  }
}

.tool-bar-center {
  display: flex;
  align-items: center;
}

.zoom-controls {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: #f5f5f5;
  }
  
  &:active {
    background: #e6e6e6;
  }
  
  i {
    font-size: 14px;
  }
}

.zoom-level {
  padding: 0 12px;
  font-size: 12px;
  color: #666;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  background: #fafafa;
}

// 图标样式（这里使用简单的CSS图标，实际项目中可以使用图标库）
.icon-undo::before { content: "↶"; }
.icon-redo::before { content: "↷"; }
.icon-save::before { content: "💾"; }
.icon-export::before { content: "📤"; }
.icon-zoom-out::before { content: "−"; }
.icon-zoom-in::before { content: "+"; }
.icon-fit::before { content: "⤢"; }
.icon-fullscreen::before { content: "⛶"; }
</style> 